<div id="content_header">
  <h3>Register a new term</h3>
</div>

<div class="row">
  <form name="termForm" role="form" ng-submit="addTerm()">

    <div class="form-group">
      <label for="Number">
        Term / Year
      </label>
      <span class="error" ng-show="termForm.Number.$error.required">Required!</span>
      <div class="row">
        <div class="col-xs-2">
          <input type="number" name="Number" class="form-control" id="" placeholder="Input field" ng-model="termNew[0].Number" required>
        </div>
        <div class="col-xs-1">
          /
        </div>
        <div class="col-xs-3">
          <input type="number" name="year" class="form-control" id="" placeholder="Input field" ng-model="termNew[0].Year" required>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="">Start Date</label>
      <div class="input-group" ng-click="openDatepicker($event, 0)">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="termNew[0].StartDate" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
    </div>

    <div class="form-group">
      <label for="">End Date</label>
      <div class="input-group" ng-click="openDatepicker($event, 1)">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="termNew[0].EndDate" is-open="datePicker.isOpen[1]" min-date="termNew[0].StartDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
    </div>

    <div class="form-group">
      <label for="CourseType">
        Course Type
      </label>
      <select name="CourseType" class="form-control" id="CourseType" ng-model="termNew[0].CourseType.Id" ng-options="coursetype.Id as coursetype.Code +' - '+ coursetype.Name for coursetype in coursetypes" required>
        <option value="" ng-hide="termNew[0].CourseType.Id">Select a Course Type.</option>
      </select>
    </div>

    <button type="submit" class="btn btn-primary" >Submit</button>
  </form>
</div>